import Vue from 'vue'
import VueRouter from 'vue-router'
import Films from '@/views/Films.vue'
import Center from '@/views/Center'
import hotfilms from '@/views/Films/hotfilms'
import soonfilms from '@/views/Films/sooncomming'
import Detil from '@/views/Detil'
import Order from '@/views/Order'
import Login from '@/views/login'
import FileSwiper from '@/components/mySwiper/fileSwiper';
Vue.use(VueRouter) // 相当于注册路由模块，用来使用，固定语法

// 配置表
const routes = [
  // 这个数组里面存放
  {
    path: '/films',
    // 路由会自动的帮你注册组件
    component: Films,
    // 相当于是详细地址了
    children: [
      {
      path: '/films/hot',
      component: hotfilms,
    },
    {
      path: '/films/soon',
      component: soonfilms,
    },
    //始终保持在这个页面上
    {
      path: '/films',
      redirect: '/films/hot'
    }
    // 在build  所有的js会变成一个文件夹,当太大,刚开始进去页面会变得卡顿
    // 演示懒加载  路由  也就是刚开始加载的时候,不用加载很多的js,只有用到了这个组件的js才会加载这个js
    // 如果不写的话,那么就会一股脑全部加载完毕
    // ,{
    //     path : '/CC',
    //     component : 
    //     // function(){},
    //     ()=>{
    //       import('@/components/xxx')       //只有加载了该组件,才导入, 这个时候要把最上面的导入删掉
    //     },


    //     // xx : true  代表什么意思????
    //     xx : true
    // }
    ]
  },




  {
    path: '/Center',
    component: Center,
    meta:{
      // 下面的是随便写的,meta是固定的
      isRole : true
    },
    // 局部的拦截方式,写在最下面则是全局的拦截


    // 这种方式是路由独享的拦截方式 只会拦截访问本组件的
    // beforeEnter : (to,from,next) => {
    //   if(XXX){

    //   }
    // }
  },


  // 重定向
  {
    // path: '/',
    path: '*',
    redirect: '/films'
    // 重定向也可以是一个命名路由
    // redirect: {
    //   name:"myzujian"
    // }
  }


  ,{
    path: '/Detil',
    component : Detil
  }

  ,{
    path : '/fileSwiper',
    component : FileSwiper
  }


// 懒加载模式,路由,要把最上面的import删掉,只用在最下面加上

  // ,{
  //   path: '/Detil',
  //   component : ()=>import('@/views/Center')
  // }


  ,{
    name : "huhu",    //命名路由
    // 动态路由   myid可以随意起名字
    path: '/Detil/:myid',
    // 三级路由
      // path: '/Detil/:myid/:myname',
    component : Detil
  },
  {
    path : '/order',
    component : Order,
    meta:{
      isRole : true
    }
  },
  {
    path : '/login',
    component : Login
  }
]

// 全局拦截   例如登录之后,点击购买,或者是售票如何证明该用户是已经登录过的,
// 在还没有进去路由之前 
// router.beforeEach((to,from,next)=>{
//   //  to  :  表示去往哪个路径   to.fullPath
//   //  from : 从哪里来
//   //  next : 处理手段  是一个函数
//   console.log(to)   //不写next() 是没有办法跳转的,相当于是没有凭证,进不去
//   if(to.meta.isRequire){    
//     // if(){}  里面可以是token的值如果是那么证明这个人已经登录过了
//     console.log('enter')
//   }else{
  // next('/login')      可以跳转到login页面,如果这个人登录失效了,或者是没有登录
  // next({
  //   path : '/login',
  //   query : {
  //     redirect : to.fullPath          //redirect 不是固定的,可以是aa,代表的是,页面是从哪里来的
  //   }
  // })
  //  this.$route.query.redirect  可以得到上面的值
  // this.$router.push(this.$route.query.redirect)      //跳转到之前向跳转的位置
//   }
// })

//  to里面有个meta ,可以放一些数据,用来确定是否需要进行拦截,然后再
// 根据本地缓存里面是否有没有用户信息,来判断是否登录过
router.beforeEach((to,from,next)=>{
  console.log(to)        /// films/hot
  if(to.meta.isRole){
    // if(){}
    // next('/login')
    next({
      path : '/login',
      //  可以用来标记是从那个页面进来的, 就会在网址后面拼接上 ?didi = xxx
      // login?didi=%2Forder   此时可以用之前的back,如果登录了,那么就会跳到这个页面
      query : {
        didi : to.fullPath
      }
    })
  }else{
    next()
  }
})
const router = new VueRouter({
  // 模式  http://localhost:8080/films/hot#/films/hot  刚开始路径    模式是  hash
  mode : 'history',     //这样的路径是没有#号的
  routes
})

// 导出
// export default router

// 或者是
export default new VueRouter({
  // 模式  http://localhost:8080/films/hot#/films/hot  刚开始路径    模式是  hash
  mode : 'history',     //这样的路径是没有#号的
  routes
})
